<template>
  <div class="stu-info">
    <div class="avatar-wrap">
        <div class="avatar">
          <img :src="studentInfo.imgae || defaultAvatar" alt=""  srcset=""
          @click="previwImg(studentInfo.imgae)">
        </div>
         <img :src="getImageUrl(studentInfo.sex == '1' ? `female.png` : 'male.png', 'applicationDetail')" class="sex"
        alt="">
      <div v-if="studentInfo.accessoryUrl" :class="['cv-file']" @click="checkFile">查看简历附件
        <i class="iconfont icon-bi" @click.stop="uploadFile"></i>
      </div>
      <div v-else :class="['cv-file']" @click="uploadFile">上传简历附件</div>
    </div>
    <div class="basic-info">
      <div class="name-wrap">
        <div class="name">{{ studentInfo.userName || '未填写' }}</div>
        <div class="age" v-if="studentInfo.birthday">{{ calculateAge(studentInfo.birthday) }}岁</div>
        <div class="age" v-else></div>
        <div class="school type" :class="[studentInfo.educationType == '1' ? 'warning' : 'primary']">{{
          studentInfo.educationType == '1' ? '往届生' : '应届生' }}</div>
        <div class="school" v-show="el" v-for="el in studentInfo.educationalTypeList" :key="el">{{ el }}</div>
      </div>
      <div class="addr-wrap">
        <div> 籍贯：{{ studentInfo.birthplace || '未填写' }}</div>
      </div>
      <div class="edu-wrap">
        <div class="edu-bg">学历：{{ studentInfo.qualificationType || '未填写' }}</div>
        <div class="graduation-time">毕业时间：{{ studentInfo.graduateTime || '未填写' }}</div>
        <div class="graduation-time">证件号码：{{ studentInfo.certificateNumber || '未填写' }}</div>

      </div>
      <div class="other-wrap">
        <div class="phone">
          <i class="iconfont icon-shoujihao"></i>
          {{ studentInfo.phone || '未填写' }}
        </div>
        <div class="email">
          <i class="iconfont icon-youxiang"></i>
          {{ studentInfo.email || '未填写' }}
        </div>
        <div class="birth">
          <i class="iconfont icon-shengri"></i>
          {{ studentInfo.birthday || '未填写' }}
        </div>
      </div>
    </div>
  </div>
  <div class="deliver-date">
    <span> 简历投递日期：{{ studentInfo.resumesTime }} <span v-show="studentInfo.resourceType">({{ studentInfo.resourceType
        }})</span></span>
    <div class="btns">
      <span v-auth="'setRecommend'"  @click="setInterpolate">内推详情</span>
      <span v-auth="'editResume'" @click="editCV">修改简历</span>
      <span v-auth="'editRecord'" @click="editRecord">修改记录</span>
    </div>
  </div>
  <Modal ref="modal"></Modal>
  <BasicModal :show="show" title="照片预览" width="40%" @closeModal="show = false">
    <template #content>
      <img width="100%" :src="studentInfo.imgae" alt="">
    </template>
  </BasicModal>
  <BasicModal :show="showUpload" @comfirm="comfirm" :widthComfirm="true" title="简历上传" width="25%"
    @closeModal="showUpload = false; resumeFile = []">
    <template #content>
      <a-upload-dragger v-model:fileList="resumeFile" list-type="picture-card"
        :before-upload="(file: File) => { beforeUpload(file, ['pdf', 'jpg', 'png', 'PNG', 'JPG', 'PDF','doc','docx']) }"
        :max-count="limit" :multiple="true" accept=".pdf,.jpg,.png,.PNG,.JPG,.PDF,.doc,.docx" name="file">
        <div class="upload-area" v-show="resumeFile.length < limit">
          <i class="iconfont icon-shangchuan"></i>
          <span style="font-size: 14px">上传文件</span>
        </div>
        <template #itemRender="{ file, actions }">
          <div class="uploaded-file">
            <div class="uploaded-status">
              <img src="@/assets/images/join/file.png" alt="" />
              <div class="file-info">
                <span class="ell">{{ file.name }}</span>
                <span>{{ getSize(file.size) }}</span>
              </div>
              <CloseOutlined class="file-del" @click="actions.remove" />
            </div>
          </div>
        </template>
      </a-upload-dragger>
      <div class="upload-tip" v-for="(v, i) in tips">{{ i + 1 }}.{{ v }}</div>
    </template>
  </BasicModal>
  <BasicModal :show="filePreviewShow" title="文件预览" width="40%" @closeModal="filePreviewShow = false">
    <template #content>
      <img :src="item" width="100%" v-for="item in studentInfo.accessoryUrlArray" :key="item" alt="" srcset="">
    </template>
  </BasicModal>
</template>
<script setup lang='ts'>
import { watch, ref, computed } from "vue";

import { uploadUpdateResumesAttachment } from "@/api/application-details/index.ts";
import BasicModal from "@/views/ApplicationDetails/Modals/BasicModal.vue"
import { comStores } from '@/store/common/comStore';
import Modal from "../Modals/Modal.vue";
import { message } from "ant-design-vue";
import { getImageUrl, getSuffix } from "@/assets/common/common.ts";
const emits = defineEmits(['doEdit']);
const defaultAvatar = ref<string>(getImageUrl(`default.png`, 'applicationDetail'));
const modal = ref<any>(Modal);
const store = comStores();
const studentInfo = ref<any>({
})
const show = ref<boolean>(false);
const showUpload = ref<boolean>(false);
const resumeFile = ref<any>([]);
const tips = [
  '请将文件大小控制在2M以内。',
  '附件仅支持pdf、jpg、png格式'
]
if (store.currentResume && Object.keys(store.currentResume).length > 0) {
  studentInfo.value = store.currentResume
}
const limit = computed(() => {
  console.log(resumeFile.value.some(el => getSuffix(el.name) == 'pdf'))
  return resumeFile.value.some(el => getSuffix(el.name) == 'pdf') ? 1 : 4
})
watch(() => store.currentResume, (val) => {
  studentInfo.value = val || {}
}, { deep: true })

const setInterpolate = () => {
  // emits("doEdit",'setInterpolate',studentInfo.value)
  modal.value.showDialog('InternalPushModal', JSON.parse(JSON.stringify(studentInfo.value)))
}
const editCV = () => {
  modal.value.showDialog('EditModal', JSON.parse(JSON.stringify(studentInfo.value)))
}
const editRecord = () => {
  // emits("doEdit",'editRecord',JSON.parse(JSON.stringify(studentInfo.value)))
  modal.value.showDialog('ResumeModificationRecordModal', JSON.parse(JSON.stringify(studentInfo.value)))
}
const filePreviewShow = ref<boolean>(false)
const checkFile = () => {
  const isImage = studentInfo.value.accessoryUrlArray?.every(el => getSuffix(el).toLowerCase() == 'jpg' || getSuffix(el).toLowerCase() == 'png');
  if (isImage) {
    filePreviewShow.value = true
  } else {
    window.open(studentInfo.value.accessoryUrlArray[0])
  }

  // const  data =await 
}
function calculateAge(birthDateString) {
  // 将字符串转换为日期对象
  const birthDate = new Date(birthDateString);
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDifference = today.getMonth() - birthDate.getMonth();
  if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
}
const previwImg = (val) => {
  if (val) {
    show.value = true
  }
}
const uploadFile = () => {
  showUpload.value = true
}
const getSize = (size: number): string => {
  let kb = size / 1024;
  if (kb > 1024) {
    return Math.ceil(kb / 1024) + ' MB';
  } else {
    return Math.ceil(kb) + ' KB';
  }
};
const beforeUpload = async (file: File, typeList: string[]) => {
  const name = getSuffix(file.name);
  console.log(name, 'name')
  if (!typeList.includes(name)) {
    message.error(`仅支持上传${typeList.join('、')}文件`);
    setTimeout(() => {
      resumeFile.value = []
    }, 200);
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('文件大小不能超过2MB');
    setTimeout(() => {
      resumeFile.value = []
    }, 200);
    return false;
  }
  return false;
};

const comfirm = async () => {
  const { processSort, resumeId, processId } = store.currentResume;
  if (resumeFile.value.length === 0) {
    return message.error('请先选择文件')
  }
  const formdata = new FormData();
  resumeFile.value.forEach(el => {
    formdata.append('files', el.originFileObj);
  })
  formdata.append('resumesId', resumeId)
  const data = await uploadUpdateResumesAttachment(formdata)
  console.log(data, '===>data')
  if (data && data.code === '10000') {
    resumeFile.value = []
    store.getResumeInfo(resumeId);
    showUpload.value = false
  } else {
    message.error(data.msg)
  }


}
</script>

<style lang="less" scoped>
:deep(.ant-upload) {
  padding: 0px !important;
  border: none;
}

.stu-info {
  width: 859px;
  display: flex;
  color: #333;

  .avatar-wrap {
    display: flex;
    flex-direction: column;
    margin-right: 24px;
    width: 104px;
    position: relative;
    cursor: pointer;

    .avatar {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 104px;
      }
    }

    .sex {
      width: 30px;
      height: 30px;
      position: absolute;
      bottom: 30px;
      right: 0;
    }

    .cv-file {
      font-weight: 400;
      font-size: 14px;
      color: #209EE4;
      line-height: 16px;
      margin-top: 5px;
      text-align: center;
      text-decoration-line: underline;
      cursor: pointer;
      display: flex;
      gap: 4px;
    }
  }

  .basic-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;

    .name-wrap {
      display: flex;
      gap: 4px;
      align-items: center;
      color: #333333;

      .name {

        font-weight: 400;
        font-size: 20px;
        line-height: 23px;
      }

      .age {
        font-weight: 400;
        font-size: 16px;
        margin: 0 10px;
      }

      .school {
        background: rgba(32, 158, 228, 0.15);
        border-radius: 4px;
        padding: 0px 6px;
        color: #209EE4;

        &:nth-child(2) {
          background: rgba(3, 204, 114, 0.15);
          color: #03CC72;
        }

        &:nth-child(3) {
          background: rgba(3, 204, 114, 0.15);
          color: #03CC72;
        }

        &:nth-child(4) {
          background: rgba(3, 204, 114, 0.15);
          color: #03CC72;
        }
      }
    }

    .addr-wrap {
      margin: 12px 0;
      display: flex;
      gap: 40px;
    }

    .edu-wrap {
      display: flex;
      gap: 36px;
      margin-bottom: 12px;
    }

    .other-wrap {
      display: flex;
      gap: 42px;

      i {
        color: #209ee4;
        margin-right: 4px;
      }
    }
  }

}

.deliver-date {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;

  .btns {
    display: flex;
    gap: 25px;
    text-decoration: underline;
    font-weight: 400;
    color: #209EE4;
    cursor: pointer;
  }
}

.notClick {
  color: #ccc !important;
  pointer-events: none;
}

.warning {
  background-color: rgb(254, 238, 203) !important;
  color: rgb(228, 191, 146) !important;
}

.primary {
  background: rgba(32, 158, 228, 0.15) !important;
  color: #209EE4 !important;
}

.uploaded-file {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 73px;
  background: #f5f7fb;
  border-radius: 7px 7px 7px 7px;
  border: 1px solid rgba(179, 192, 200, 0.3);
  position: relative;
}

.uploaded-status {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 31px 0 21px;
  box-sizing: border-box;

  img {
    width: 45px;
    height: 51px;
    margin-right: 16px;
  }

  .file-info {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    color: #333333;
    font-size: 21px;
    position: relative;
    width: 100%;

    span {
      width: 70%;

      &:nth-child(2) {
        color: #b3c0c8;
      }
    }
  }

  .file-del {
    position: absolute;
    right: 10px;
    font-size: 20px;
    color: #b3c0c8;
  }
}

.upload-tip {
  font-size: 14px;
  color: #B3C0C8;
  line-height: 30px;

  &:nth-of-type(1) {
    margin-top: 16px;
  }
}

.upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 73px;

}

:deep(.ant-upload-list-item-error) {
  border-color: #209ee4 !important;
  color: #209ee4 !important;
}
</style>
